<template>
    <div class="questplan">
        <div class="top">
            <p>致知计划之科学季</p>
            <span>欢迎回答，领取权益。若无心仪问题，可搜索自然科学、心理学、健康、工程学领域任意问题进行回答，回答通过优质审核后，即为有效参与。</span>
            <a href="#">活动页面</a>
        </div>
        <div class="left-menu-list" v-for="item in form">
            <div class="menu-list-top" style="color: rgb(133, 144, 166); font-size: 15px">
                <i  class="iconfont icon-iconguifanbeifen"></i>
                最近有60人看过
            </div>
            <div class="menu-list-top1"><p >{{item.title}}</p></div>
            <div class="menu-list-top2"  >
                <i class="iconfont icon-bi"></i>
                <input  type="text" value="写回答">
                <span >{{item.num}}</span>
                <span>回答</span>
                <span>.</span>
                <span >{{item.counts}}</span>
                <span>关注</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "questplan",
        data(){
            return{
                form:[],
                // data:[]
            }
        },
        mounted() {
            this.getlist()
        },
        methods:{
            getlist(){
                this.$axios.get('/api/questplan.json').then((res)=>{
                    this.form=res.data.data
                })
            }
        }
    }
</script>

<style scoped>
    .questplan .top{
        margin: 0 auto;
        width: 96%;
        box-sizing: border-box;
        padding-left: 10px;
        height:70px;
        border-bottom: 1px solid rgba(133,144,166,.12);
        line-height: 20px;
    }
    .questplan .top p:first-of-type{
        box-sizing: border-box;
        min-width: 0px;
        font-weight: 600;
        margin: 0px;
    }
    .questplan .top span{
        box-sizing: border-box;
        min-width: 0px;
        font-size: 14px;
        color: rgb(133, 144, 166);
        margin: 5px 0px 0px;
    }
    .questplan .top a{
        box-sizing: border-box;
        min-width: 0px;
        font-size: 14px;
        border-bottom:1.5px solid #99a9bf;
        color: rgb(133, 144, 166);
        margin: 5px 0px 0px;
    }
    .left-menu-list{
        padding: 20px 0 0 10px;
        box-sizing: border-box;
        width: 100%;
        height: 143.67px;
        border-bottom: 1px solid rgba(133,144,166,.12);
    }
    .menu-list-top{
        margin-top: 10px;
    }
    .menu-list-top i{
        background-color: rgba(0,132,255,.08);
        border-radius: 3px !important;
        margin-right: 5px;
    }
    .menu-list-top1{
        margin-top: 15px;
        font-weight: 600;
        line-height: 30px;
        font-size: 17px;
    }
    .menu-list-top2{
        margin-top: 20px;

    }
    .menu-list-top2 i{
        position: absolute;
        z-index: 10;
        margin-left: 10px;
        color: white;
        margin-top: 5px;
    }
    .menu-list-top2 span{
        color: #8590a6;
        font-size: 14px;
        margin-left: 5px;
    }
    .menu-list-top2 span:first-of-type{
        margin-left: 15px;
    }
    .menu-list-top2 input{
        width: 96px;
        box-sizing: border-box;
        height: 28px;
        outline: none;
        border: none;
        background: #0084ff;
        line-height: 26px;
        border-radius: 3px;
        text-align: center;
        color: #fff;
        padding-left: 5px;
    }

</style>
